
<style>
	
	body {
	  font-family: 'Ubuntu', sans-serif;
	  width:94%;
	  margin-left: 2%;
	}
	
	p{
	  color:#525252;
	  font-size:12px;
	}
	
	.skillbar {
		position:relative;
		display:block;
		margin-bottom:15px;
		width:100%;
		background:#eee;
		height:35px;
		border-radius:3px;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		-webkit-transition:0.4s linear;
		-moz-transition:0.4s linear;
		-ms-transition:0.4s linear;
		-o-transition:0.4s linear;
		transition:0.4s linear;
		-webkit-transition-property:width, background-color;
		-moz-transition-property:width, background-color;
		-ms-transition-property:width, background-color;
		-o-transition-property:width, background-color;
		transition-property:width, background-color;
	}
	
	.skillbar-title {
		position:absolute;
		top:0;
		left:0;
	width:110px;
		font-weight:bold;
		font-size:13px;
		color:#ffffff;
		background:#6adcfa;
		-webkit-border-top-left-radius:3px;
		-webkit-border-bottom-left-radius:4px;
		-moz-border-radius-topleft:3px;
		-moz-border-radius-bottomleft:3px;
		border-top-left-radius:3px;
		border-bottom-left-radius:3px;
	}
	
	.skillbar-title span {
		display:block;
		background:rgba(0, 0, 0, 0.1);
		padding:0 20px;
		height:35px;
		line-height:35px;
		-webkit-border-top-left-radius:3px;
		-webkit-border-bottom-left-radius:3px;
		-moz-border-radius-topleft:3px;
		-moz-border-radius-bottomleft:3px;
		border-top-left-radius:3px;
		border-bottom-left-radius:3px;
	}
	
	.skillbar-bar {
		height:35px;
		width:0px;
		background:#6adcfa;
		border-radius:3px;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
	}
	
	.skill-bar-percent {
		position:absolute;
		right:10px;
		top:0;
		font-size:11px;
		height:35px;
		line-height:35px;
		color:#ffffff;
		color:rgba(0, 0, 0, 0.4);
	}

	
</style>



<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        
        <div class="col-xs-12 col-sm-8">
            <h2>用户套餐详情</h2>
        </div>
    </div>

    
    <div class="skillbar clearfix " data-percent=""/>
	<div class="skillbar-title" style="background: #d35400;"><span>视频额度</span></div>
	<div class="skillbar-bar" style="background: #e67e22;"></div>
	<div class="skill-bar-percent"> {$userInfo['last_aivideo_nums']} </div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="{$bfb2=round(($activity_nums/$sellerconfig->video_activitys)*100,2).'%'}">
	<div class="skillbar-title" style="background: #2980b9;"><span>活动数量</span></div>
	<div class="skillbar-bar" style="background: #3498db;"></div>
	<div class="skill-bar-percent">{$activity_nums}/{$sellerconfig->video_activitys}</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="{$bfb3=round(($shop_nums/$sellerconfig->shop_nums)*100,2).'%'}">
	<div class="skillbar-title" style="background: #2c3e50;"><span>商户数量</span></div>
	<div class="skillbar-bar" style="background: #2c3e50;"></div>
	<div class="skill-bar-percent">{$shop_nums}/{$sellerconfig->shop_nums}</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="{$bfb4=round(($shop_days/$sellerconfig->days)*100,2).'%'}">
	<div class="skillbar-title" style="background: #27ae60;"><span>剩余天数</span></div>
	<div class="skillbar-bar" style="background: #2ecc71;"></div>
	<div class="skill-bar-percent">{$shop_days}/{$sellerconfig->days}</div>
	
	
</div>

    

    <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>


<script type="text/javascript">
$(document).ready(function(){
	$('.skillbar').each(function(){
		$(this).find('.skillbar-bar').animate({
			width:$(this).attr('data-percent')
		},1000);
	});
});
</script>

    <!--<div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>-->
</form>



